<template>
	<view>
		<u-navbar back-text="返回" back-icon-color="#088cff" back-icon-size="14px" title="文书送达"
			:back-text-style="{ color: '#088cff',fontSize: '14px' }" :customBack="goBack">
		</u-navbar>

		<view class="docprod algin_justity_center">
			<!-- 步骤条 -->
			<view class="docprod_step">
				<u-steps :current="currentKey">
					<u-steps-item v-for="item in stepList" :key="item.key" :title="item.name"> <text
							@click.stop="setStepKey(item.key)"
							:class="`${currentKey >= item.key ? 'slot-icon-active' : 'slot-icon-disable'}`" slot="icon">
							{{item.key}}</text> </u-steps-item>
				</u-steps>
			</view>


			<!-- 文书字段 -->
			<u--form labelPosition="left" :model="formValue" :rules="rules" ref="uForm">
				<!-- 送达信息 -->
				<view class="docprod_info">
					<u-form-item label="案号: " prop="code" borderBottom ref="item1">
						<u--input v-model="formValue.code" border="none" placeholder="请输入案号"></u--input>
					</u-form-item>
					<u-form-item label="送达人: " prop="code" borderBottom ref="item1">
						<u--input v-model="formValue.code" border="none" placeholder="请输入送达人"></u--input>
					</u-form-item>
					<u-form-item label="送达方式: " prop="code" borderBottom ref="item1">
						<u--input v-model="formValue.code" border="none" placeholder="请输入送达方式"></u--input>
					</u-form-item>
					<u-form-item label="文书类型: " prop="code" borderBottom ref="item1">
						<u--input v-model="formValue.code" border="none" placeholder="请输入文书类型"></u--input>
					</u-form-item>
					<u-form-item label="送达时间: " prop="code" :borderBottom="false" ref="item1"
						labelStyle="{color: red;}">
						<u--input v-model="formValue.code" border="none" placeholder="请输入送达时间"></u--input>
					</u-form-item>

				</view>


				<view class="docprod_preview algin_center_justify_right">
					<u-icon name="download"></u-icon>下载文书
				</view>
			</u--form>

			<view class="docprod_button">
				<view class="docprod_button_item">
					<u-button @click="submit" type="primary" text="保存"></u-button>
				</view>
				<view class="docprod_button_item">
					<u-button @click="submit" type="primary" text="下一步"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				currentKey: 1, // 当前选中key
				stepList: [{
						key: 1,
						name: '行政复议申请受理通知书'
					},
					{
						key: 2,
						name: '行政复议答复通知书'
					},
				],
				formValue: {
					code: null,
				},
				rules: {
					'code': {
						required: true,
						message: '请填写案号',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		onLoad() {
			// console.log('this.$route', this.$route)
		},
		methods: {
			// 设置步骤条
			setStepKey(key) {
				// console.log('setStepKey', key)
				this.currentKey = key
			},
			// 提交
			submit() {
				console.log('formValue', this.formValue)
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 返回
			goBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/flex.scss';

	// 自定义步骤条图标
	.slot-icon-active,
	.slot-icon-disable {
		width: 21px;
		height: 21px;

		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 21px;
		text-align: center;
	}

	.slot-icon-active {
		background-color: #3496FB;
	}

	.slot-icon-disable {
		background-color: #969799;
	}

	::v-deep .u-divider {
		margin: 0 0 0.2rem 0;
	}

	::v-deep .uni-input-placeholder {
		// border: 1px solid red;
		text-align: right !important;
	}

	::v-deep .u-form-item__body__right {
		flex: 6 !important;
		// border: 1px solid blue;
	}

	::v-deep .u-form-item__body__left {
		flex: 2 !important;
		// border: 1px solid red;
	}

	::v-deep .u-form-item__body__left__content__label {
		letter-spacing: 0.1rem;
	}

	::v-deep .u-form-item__body__right__message {
		// border: 1px solid red;
		margin-left: 5rem !important;
	}

	::v-deep .u-form {
		width: 90%;
		padding: 0 !important;
		// border: 1px solid red;
	}


	.docprod {
		width: 100%;
		flex-direction: column;

		&_step,
		&_info {
			width: 90%;
			// height: 8rem;
			// border: 1px solid red;
			margin-top: 1rem;
			background: #FFFFFF;
			box-shadow: 7rpx 8rpx 43rpx 0rpx #F5F5F5;
			border-radius: 20rpx;
			padding: 0.2rem 1rem;
		}

		&_step {
			width: 80%;
			padding: 0.6rem 1rem;
		}

		&_preview {
			// border: 1px solid red;
			color: #3496FB;
			margin: 1rem 0.4rem 1.4rem 0;
		}

		&_preview ::v-deep .u-icon__icon {
			color: #3496FB !important;
			margin-top: 0.2rem;
			margin-right: 0.2rem;
		}

		&_button {
			width: 100%;
			// border: 1px solid red;
			@extend .flex;
			flex-direction: row;
			justify-content: space-around;

			&_item {
				width: 40%;
				// border: 1px solid red;
			}

			&_item ::v-deep .u-button {
				border: none;
				border-radius: 2rem;
				letter-spacing: 0.2rem;
			}
		}
	}
</style>